<template>
	<view class="page">
		<!-- 标题区 -->
		<view class="title-area">
			<text class="main-title">培训师清单</text>
			<text class="sub-title">创建清单，不遗漏任务</text>
		</view>

		<!-- 表单卡片 -->
		<view class="card">
			<!-- 表单头部 -->
			<view class="card-header">
				<text class="icon">📋</text>
				<text>新建清单任务</text>
			</view>

			<!-- 表单正文 -->
			<view class="card-body">
				<!-- 项目名称 -->
				<view class="form-item">
					<text class="label"><text class="required">*</text> 项目名称</text>
					<input class="input" placeholder="例如：24号上午汇报本次进度" v-model="form.projectName" />
					<text v-if="errors.projectName" class="error">{{ errors.projectName }}</text>
				</view>

				<!-- 时间地点 -->
				<view class="form-row">
					<view class="form-col">
						<text class="label"><text class="required">*</text> 完成时间</text>
						<picker mode="date" :value="form.dueDate" @change="onDateChange">
							<view class="picker">{{ form.dueDate || '请选择日期' }}</view>
						</picker>
						<text v-if="errors.dueDate" class="error">{{ errors.dueDate }}</text>
					</view>

					<view class="form-col">
						<text class="label"><text class="required">*</text> 项目地点</text>
						<input class="input" placeholder="例如：光华长安大厦" v-model="form.location" />
						<text v-if="errors.location" class="error">{{ errors.location }}</text>
					</view>
				</view>

				<!-- 项目经理 -->
				<view class="form-item">
					<text class="label"><text class="required">*</text> 项目经理</text>
					<picker :range="managers" @change="onManagerChange">
						<view class="picker">{{ form.manager || '请选择负责人' }}</view>
					</picker>
					<text v-if="errors.manager" class="error">{{ errors.manager }}</text>
				</view>

				<!-- 任务内容 -->
				<view class="form-item">
					<text class="label"><text class="required">*</text> 任务内容</text>
					<textarea class="textarea" placeholder="详细描述任务要求、目标和预期成果..." v-model="form.content" rows="5" />
					<text v-if="errors.content" class="error">{{ errors.content }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="button-group">
					<button class="button button-primary" @click="submitForm">创建任务</button>
					<button class="button button-secondary" @click="resetForm">重置表单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		saveJob,
		getProjectManager
	} from "../../utils/getDate.js"
	export default {
		data() {
			return {
				form: {
					projectName: '',
					dueDate: '',
					location: '',
					manager: '',
					content: '',
				},
				locations: ['线上会议', '第一教学楼201', '金融培训中心', '企业会议室'],
				managers: ['项目经理A', '项目经理B', '项目经理C'],
				errors: {},
				projectId: "",
			};
		},
		onLoad(options) {
			this.projectId = options.projectId;
			this.ongetProjectManager()
		},
		methods: {
			ongetProjectManager() {
				getProjectManager().then(res => {
					const pmList = res.pmList || []; // 添加空数组作为默认值
					this.managers = pmList.map(item => item.Name); // 直接映射新数组
				})
			},

			// 格式化日期时间
			formatDateTime(dateString, type) {
				const date = new Date(dateString);
				if (type === 'start') {
					return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} 09:00:00`;
				} else {
					return `${date.getFullYear()}-${(date.getMonth()+1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')} 18:00:00`;
				}
			},

			// 重置表单
			resetForm() {
				this.form = {
					projectName: '',
					dueDate: '',
					location: '',
					manager: '',
					content: '',
				};
				this.errors = {};
			},
			onDateChange(e) {
				this.form.dueDate = e.detail.value;
			},
			onLocationChange(e) {
				this.form.location = this.locations[e.detail.value];
			},
			onManagerChange(e) {
				this.form.manager = this.managers[e.detail.value];
			},
			validate() {
				this.errors = {};
				const now = new Date().toISOString().split('T')[0];
				if (!this.form.projectName) this.errors.projectName = '请填写项目名称';
				if (!this.form.dueDate || this.form.dueDate < now) this.errors.dueDate = '请选择有效日期';
				if (!this.form.location) this.errors.location = '请选择项目地点';
				if (!this.form.manager) this.errors.manager = '请选择项目经理';
				if (!this.form.content) this.errors.content = '请填写任务内容';
				return Object.keys(this.errors).length === 0;
			},
			submitForm() {
				if (this.validate()) {
					// 将表单数据转换为接口需要的格式
					let data = {
						projectId: this.projectId, // 建议添加生成项目ID的方法
						projectName: this.form.projectName, // 添加项目名称
						starttime: this.formatDateTime(this.form.dueDate, 'start'), // 格式化开始时间
						endtime: this.formatDateTime(this.form.dueDate, 'end'), // 格式化结束时间
						location: this.form.location,
						content: this.form.content,
						manager: this.form.manager, // 添加项目经理
						createName: uni.getStorageSync("userinfo").name,
						status: 1
					}

					saveJob(data).then(res => {
						if (res.state == "ok") {
							uni.showToast({
								title: '任务创建成功',
								icon: 'success'
							});
							this.resetForm();

							setTimeout(function() {
								uni.navigateBack()
							}, 1000);
						}
						// 添加成功处理逻辑


					})
				}
			},

		}
	};
</script>

<style scoped>
	.page {
		background-color: #f8fafc;
		min-height: 100vh;
		padding: 32rpx;
	}

	.title-area {
		text-align: center;
		margin-bottom: 48rpx;
	}

	.main-title {
		font-size: 44rpx;
		font-weight: bold;
		color: #111827;
		margin-bottom: 16rpx;
		display: block;
	}

	.sub-title {
		font-size: 28rpx;
		color: #6b7280;
	}

	.card {
		background-color: #ffffff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.card-header {
		background-color: #2563eb;
		padding: 24rpx 32rpx;
		color: #ffffff;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.card-header .icon {
		margin-right: 16rpx;
	}

	.card-body {
		padding: 32rpx;
	}

	.form-item {
		margin-bottom: 32rpx;
	}

	.form-row {
		display: flex;
		flex-wrap: wrap;
		gap: 24rpx;
		margin-bottom: 32rpx;
	}

	.form-col {
		flex: 1;
		min-width: 48%;
	}

	.label {
		font-size: 28rpx;
		color: #374151;
		margin-bottom: 12rpx;
		display: block;
	}

	.required {
		color: #ef4444;
	}

	.input,
	.picker,
	.textarea {
		width: 100%;
		padding: 24rpx;
		border: 1px solid #d1d5db;
		border-radius: 16rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		background-color: #ffffff;
	}

	.input {
		height: 100rpx;
	}

	.error {
		font-size: 24rpx;
		color: #ef4444;
		margin-top: 8rpx;
	}

	.button-group {
		display: flex;
		/* flex-direction: column; */
		gap: 24rpx;
		margin-top: 40rpx;
		height: 80rpx;
	}

	.button {
		border-radius: 16rpx;
		font-size: 28rpx;
		text-align: center;
		font-weight: 500;
	}

	.button-primary {
		background-color: #2563eb;
		color: white;
	}

	.button-secondary {
		background-color: #e5e7eb;
		color: #374151;
	}
</style>